import { useState } from 'react'
import { View, Text, Swiper, SwiperItem } from '@tarojs/components'
import ProductList from '../product-list'

import './index.scss'

function Index () {
  const [idx, setIdx] = useState(0)

  const onChange = i => setIdx(i)

  return (
    <View className="commoditys-containers">
      <View className='commoditys-tabs'>
        <View
          className={`commoditys-tabs-item ${idx === 0 ? 'commoditys-tabs-item--selected' : ''}`}
          onClick={() => onChange(0)}
        >
          <Text className='commoditys-tabs-item-text'>全部</Text>
        </View>
        <View
          className={`commoditys-tabs-item ${idx === 1 ? 'commoditys-tabs-item--selected' : ''}`}
          onClick={() => onChange(1)}
        >
          <Text className='commoditys-tabs-item-text'>推荐</Text>
        </View>
        <View
          className={`commoditys-tabs-item ${idx === 2 ? 'commoditys-tabs-item--selected' : ''}`}
          onClick={() => onChange(2)}
        >
          <Text className='commoditys-tabs-item-text'>优惠</Text>
        </View>
        <View
          className={`commoditys-tabs-item ${idx === 3 ? 'commoditys-tabs-item--selected' : ''}`}
          onClick={() => onChange(3)}
        >
          <Text className='commoditys-tabs-item-text'>直播</Text>
        </View>
      </View>
      <Swiper className='commoditys-swiper' current={idx}>
        <SwiperItem>
          <ProductList></ProductList>
        </SwiperItem>
        <SwiperItem>
          <ProductList></ProductList>
        </SwiperItem>
        <SwiperItem>
          <ProductList></ProductList>
        </SwiperItem>
        <SwiperItem>
          <ProductList></ProductList>
        </SwiperItem>
      </Swiper>
    </View>
  )
}

export default Index
